<template>
	<view class="content">
		<CustomNav title="商品详情" :normal="{textColor:'#fff'}" :is-back="true"></CustomNav>
		<view class="top-block">
			<swiper style="height: 500rpx;width: 100%;" :indicator-dots="false" :autoplay="true" :circular="true"
				:interval="3000">
				<swiper-item v-for="(item,index) in info.file" :key="item.id">
					<image class="swiper-item-img" style="width: 100%;height: 100%;" :src="cloudStorage+item.url"
						mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<view class="info-block">
				<view class="detail-item">
					<view class="wage">￥{{item.integral}}积分+{{item.voucher}}券</view>
					<view class="info-content">
						{{info.name}}
					</view>
				</view>
				<view class="title">— 商品详情 —</view>
				<view class="text-content">
					<mp-html :content="info.goodsDetails" style="max-width: 100%;"></mp-html>
				</view>
				<view class="btn-item">
					<view class="btn" v-if="info.applyType==1" @click="openChoose">立即兑换</view>
				</view>
			</view>
		</view>
		<view v-if="displayChoose" class="choose-block">
			<view class="choose-content">
				<view class="iconfont icon-a-guanbi" @click="closeChoose" style="text-align: end;margin-bottom: 30rpx;">
				</view>
				<view class="address-block">
					<view class="info-item">
						<view class="iconfont icon-dizhiguanli"></view>
						<view class="title-item" v-if="addressModel.address"
							@click="navigate('/page_other/address/index?type=1')">
							<view class="title">
								<view class="text">
									{{addressModel.contacts}},{{addressModel.phone}},{{addressModel.area}},{{addressModel.address}}
								</view>
							</view>
							<image class="more"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
							</image>
						</view>
						<view class="title-item" v-else @click="navigate('/page_other/address/index?type=1')">
							<view class="title">
								<view class="text">请选择您的收获地址</view>
							</view>
							<image class="more"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
							</image>
						</view>
					</view>
				</view>
				<view class="choose">
					<view class="choose-item">
						<image :src="cloudStorage+info.file[0].url" class="choose-img" mode="aspectFill"></image>
						<view class="name-item">
							<view class="choose-name">{{info.name}}</view>
							<view class="wage">￥<text class="txt">{{info.integral}}</text> 积分</view>
						</view>
					</view>

				</view>
				<view class="count-block">
					<view class="count-title">选择数量</view>
					<view class="count-item">
						<view class="inventory">剩余库存{{info.number}}件</view>
						<view class="operation-block">
							<view :class="num==0?'disabled':''" class="subtract-btn btn" @click="operationNum('-')">
								<view class="iconfont icon-jianhao">-</view>
							</view>
							<view class="num">{{ num }}</view>
							<view :class="num==info.number?'disabled':''" class="add-btn btn"
								@click="operationNum('+')">
								<view class="iconfont icon-jiahao">+</view>
							</view>
						</view>
					</view>
					<view v-if="info.isRefund==2" class="remarks">本商品一经兑换，不退不换</view>
					<view v-else-if="info.isRefund==1" class="remarks">本商品支持退款</view>
				</view>
				<!-- <view class="btn-item">
					<view class="btn" @click="exchange">立即兑换</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStorage
	} from '@/util/auth.js';
	import {
		goodsSpecsGoods,
		getIntegralGoodsById
	} from '@/api/integral.js';
	import {
		getUserInfo
	} from '@/api/home.js'

	export default {
		data() {
			return {
				number: 1,
				ruleList: [],
				id: null,
				num: 10,
				info: {
					file: [],
					name: '',
					integral: '',
					content: '',
					label: '',
					goodsDetails: '',
					isRefund: 2,
				},
				myIntegral: 0,
				displayChoose: false,
				price: 0,
				addressModel: {
					contacts: '',
					area: '',
					address: '',
					phone: ''
				}
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.id = e.id;
			uni.$on('addressInfo', (addressInfo) => {
				this.addressModel = addressInfo;
			})
			this.getData()
			const userInfo = getStorage('user');
			this.isVip = userInfo.vip;
		},
		methods: {
			//商品详情
			getIntegralGoodsById() {
				return getIntegralGoodsById({
					id: this.id,
				}).then((res) => {
					this.info = res
				})
			},
			getIntegralById() {
				return getUserInfo().then((res) => {
					this.myIntegral = res.integral
					if (res.addressModel) {
						this.addressModel = res.addressModel
					}
				})
			},
			openChoose() {
				if (getStorage('token')) {
					this.displayChoose = true
					this.num = 1
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先登录！',
						cancelText: '先逛逛',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/page_other/mine/mine'
								})
							} else {
								uni.navigateBack();
							}
						}
					})
				}

			},
			closeChoose() {
				this.displayChoose = false
			},
			exchange() {
				let that = this
				if (this.isVip == 1) {
					if (this.addressModel.address !== '') {
						if (this.num > 0) {
							if (this.myIntegral >= this.price) {
								uni.showModal({
									title: '提示',
									content: '本商品一经兑换，不退不换,确定要兑换该商品吗？',
									cancelText: '取消',
									confirmText: '确定',
									success(res) {
										if (res.confirm) {
											uni.showLoading({
												title: '提交中',
												mask: true
											})
											goodsSpecsGoods({
												number: that.num,
												id: that.id,
												addressId: that.addressModel.id
											}).then(res => {
												uni.showToast({
													title: '兑换成功',
													icon: 'success',
													duration: 2000,
													mask: true,
													success: function() {
														setTimeout(function() {
															that.displayChoose = false
															that.getData();
														}, 2000)
													},
												})
											})
										}
									}
								})
							} else {
								this.showToast('您的积分不足！')
							}
						} else {
							this.showToast('请选择数量！')
						}
					} else {
						this.showToast('请选择收货地址！')
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先开通会员！',
						cancelText: '先逛逛',
						confirmText: '去开通',
						success(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_other/become_member/index'
								})
							}
						}
					})
				}
				return false
			},
			operationNum(operation) {
				if (operation == '-' && this.num != 0) {
					this.num--;
				}
				if (operation == '+' && this.num != this.info.number) {
					this.num++;
				}
				if (this.num > this.info.number) {
					this.showToast('库存不足!')
				}
				this.price = this.info.integral * this.num;
			},
			getData() {
				uni.showCustomLoading();
				Promise.all([this.getIntegralGoodsById()]).finally(() => {
					uni.hideCustomLoading()
				})
				if (getStorage('token')) {
					this.getIntegralById()
				}
			}
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;

		.info-content {
			font-size: 32rpx;
			font-weight: normal;
			line-height: 48rpx;
			color: #1A1A1A;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.info-block {
			background: #F5F9FC;
			min-height: 70vh;
			border-radius: 30rpx;
			margin-top: -30rpx;
			position: relative;
			padding: 30rpx;

			.text-content {
				image {
					width: 100% !important;
				}
			}

			.detail-item {
				background: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;

				.wage {
					color: #FF2F34;
					font-size: 30rpx;
					margin-bottom: 30rpx;

					.txt {
						font-size: 44rpx;
						margin-right: 10rpx;
					}
				}

				.name {
					font-size: 32rpx;
					line-height: 54rpx;
					font-weight: bold;
				}

				.describe {
					color: #828282;
					font-size: 30rpx;
					margin-bottom: 15rpx;
					margin-top: 30rpx;
				}
			}

			.title {
				width: 100%;
				display: flex;
				justify-content: center;
				margin: 30rpx auto;
				color: #808080;
			}

			.img-item {
				width: 100%;
				display: flex;
				flex-direction: column;

				.img {
					width: 100%;
					margin-bottom: 30rpx;
				}
			}

			.btn-item {
				width: calc(100% - 60rpx);
				position: fixed;
				bottom: 10%;
				display: flex;
				justify-content: center;

				.btn {
					background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
					color: #fff;
					width: 340rpx;
					height: 80rpx;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.choose-block {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999;
			width: 100vw;
			height: 100vh;

			.choose-content {
				width: 100%;
				height: auto;
				background: #fff;
				z-index: 9999;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 0;
				display: flex;
				flex-direction: column;
				box-shadow: 0 0 10px 0px #dadada;
				min-height: 50vh;
				border-radius: 30rpx;
				padding: 30rpx;

				.address-block {
					margin-bottom: 30rpx;

					.info-item {
						display: flex;
						align-items: center;
						border-bottom: 1px solid #EFEFEF;
						padding-bottom: 30rpx;


						.iconfont {
							width: 60rpx;
							font-size: 38rpx;
							color: #999;
						}

						.title-item {
							width: calc(100% - 60rpx);
							display: flex;
							align-items: center;
							justify-content: space-between;

							.title {
								width: calc(100% - 45rpx);

								.text {
									font-size: 30rpx;
								}
							}

							.more {
								width: 35rpx;
								height: 35rpx;
							}
						}
					}
				}

				.choose {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					border-bottom: 1px solid #F5F9FC;
					padding-bottom: 40rpx;

					.choose-item {
						display: flex;
						flex-direction: row;
						//align-items: center;
						width: 100%;

						.choose-img {
							width: 160rpx;
							height: 160rpx;
							border-radius: 20rpx;
							background-color: #F5F9FC;
							margin-right: 30rpx;
						}

						.name-item {
							width: calc(100% - 240rpx);

							.choose-name {
								word-break: break-all;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								/* 超出几行省略 */
								overflow: hidden;
								margin-bottom: 20rpx;
							}

							.wage {
								color: #FF2F34;
								font-size: 32rpx;

								.txt {
									font-size: 40rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}

				.count-block {
					display: flex;
					flex-direction: column;
					padding-top: 40 rpx;

					.remarks {
						margin-top: 20 rpx;
						color: #828282;
						font-size: 28 rpx;
					}

					.rule-block {
						width: 100%;
						margin: 20 rpx 0 10 rpx;

						.rule {
							padding: 20 rpx 30 rpx;
							width: 100%;
							margin-bottom: 20 rpx;
							background-color: #EEEEEE;
							line-height: 60rpx;
							border-radius: 20rpx;
							color: #1A1A1A;
						}

						.rule.active {
							color: #FF2F34;
							background: rgba(255, 47, 52, 0.1);
							border: 1px solid #FF2F34;
							box-sizing: border-box;
						}
					}

					.count-title {
						font-size: 34rpx;
					}

					.count-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 20rpx;

						.inventory {
							color: #828282;
							font-size: 32rpx;
						}

						.operation-block {
							flex-grow: 0;
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: 30rpx;
							background: #F5F9FC;
							border-radius: 60rpx;

							.num {
								margin: 0 30rpx;
							}

							.btn {
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 32rpx;
								border-radius: 50%;
								width: 80rpx;
								height: 80rpx;
								background: #efefef;
								color: #fff;
							}

							.iconfont {
								color: #000;

							}

							.btn.disabled {
								background: #efefef;
								color: #EEEEEE;
							}
						}
					}
				}

				.btn-item {
					width: calc(100% - 60rpx);
					display: flex;
					justify-content: center;
					margin-top: 150rpx;
					margin-left: 30rpx;

					.btn {
						background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
						color: #fff;
						width: 340rpx;
						height: 80rpx;
						border-radius: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>